<template>
    <div>
         <el-row class="tac">
           
            <el-col :span="24">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <router-link to="/index">
                <el-menu-item index="1">
                    <i class="el-icon-setting"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                </router-link>

                <el-submenu index="2">
                    <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>工作</span>
                    </template>
                    <router-link to="/overtime">
                    <el-menu-item index="1-1">加班记录</el-menu-item>
                    </router-link>
                    <router-link to="/worklog">
                    <el-menu-item index="1-2">工作日志</el-menu-item>
                    </router-link>
                </el-submenu>
                <!-- <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </el-menu-item>
                <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">导航三</span>
                </el-menu-item> -->
                
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
   name:"Aside",
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>
<style lang="less" scoped>
    a {
        text-decoration: none;
    }
  .el-menu-vertical-demo{
      height:calc(100vh - 61px)
  }
</style>s